<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box1 {
            height: 300px;
            width: 100px;
            background-color: yellow;
        }
    </style>
    <script>
        window.onload = function() {
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function() {
                // currentStyle只有IE支持
                // alert(box1.currentStyle.height);

                // 在其他浏览器可以使用getComputedStyle()这个方法来获取元素的样式
                // 这个方法时window的方法
                // 需要两个参数
                //      第一个：要获取的元素
                //        第二个：可以传递一个伪元素，一般都传null


                // 该方法会返回一个对象，对象中封装了当前元素对应的样式
                // 可以通过对象.样式名来读取样式
                // 如果获取的样式没有设置，则会获取到真实的值，而不是默认值
                // 比如，没有设置width，他不会获取到auto，而是一个长度


                // var obj = getComputedStyle(box1, null);
                // 正常浏览器
                // alert(getComputedStyle(box1, null).backgroundColor);
                // IE8的方式
                // alert(box1.currentStyle.backgroundColor);
                alert(getStyle(box1, "height"));




            };
        };

        // 定义一个函数，用来获取指定元素的当前样式
        // 参数
        //         obj要获取样式的元素
        //          name要获取的样式名
        function getStyle(obj, name) {
            // return getComputedStyle(obj, null)[name];
            return obj.currentStyle[name];
        }
    </script>
</head>

<body>
    <button id="btn01">点我一下</button>
    <div id="box1"></div>
</body>

</html>